其他
【面试题】这26道CSS面试题是最近面试中出现最频繁的
模拟面试、简历指导可私信找我，最低的价格收获最高的指导~
前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。
CSS
1、选择器权重
：最高权重 内联样式：1000 id选择器：100 类选择器：10 属性选择器：10 伪类选择器：10 标签选择器：1 伪元素选择器：1 相邻兄弟选择器：0 子选择器：0 后代选择器：0 通配符选择器：0
2、可继承和不可继承样式
不可继承
display width、height、margin、padding、border background、background-color position、top、right、left、bottom
可继承
font-size、font-weight、font-family line-height、text-align、color visibility cursor
block和inline的区别？
block：独占一行，可设置宽高、margin、padding inline：不独占一行，不可设置宽高，可设置水平margin、padding但不能设置垂直方向margin、padding
3、隐藏元素的方式
display：none 直接消失 visibility：hidden 不可见，但占着位置 opacity：0 透明不可见，但占着位置 position：absolute 绝对定位并移出可见范围 z-index：-999 将层级设置在底部，让他不可见
4、link和@import区别
link可以加载css、rss；@import只能加载css link在页面载入时同时加载；@import在页面载入后再加载 link无兼容问题；@import是新语法，低版本浏览器不兼容 link标签可被js操作dom去除；@import不行
5、transition和animation的区别
transition：过度样式，需要被动触发 animation：动画样式，不需要被动触发，可以自动触发，可结合@keyframe进行多个关键帧的动画
6、伪元素和伪类
伪元素：顾名思义，假的元素，只会显示其内容，但是并不会在dom树中找到他
p::before {content:"林三心";}
p::after {content:"林三心";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
伪类：将一些效果加到节点上，例如鼠标点击，悬浮等
a:hover {color: #FF00FF}
p:first-child {color: red}
7、盒模型
标准盒模型：width、height的计算范围只包含content IE盒模型：width、height的计算范围包含content、padding、border
通过box-sizing进行设置
box-sizing: content-box标准盒模型（默认） box-sizing: border-boxIE盒模型（怪异盒模型）
8、CSS3新样式
:not(.cc)：新增的选择器，标识所有class不是“cc”的节点 border-radius：边框圆角 box-shadow：阴影 text-shadow：文字阴影 text-decoration：文字样式渲染 gradient：线性渐变 transform：可设置变形、放大缩小、旋转、定位 flex：flex布局
9、CSS提升性能方式
1、css代码压缩 2、link代替@import 3、避免多层选择器 4、动画CPU加速
10、为何使用less、sass
他们是css预处理器，使用他们的变量、继承、运算、函数等功能，大大提高样式编写效率，大多数打包工具最后都会将他们解析为原始css样式代码
11、postCss是啥
后置css，将解析后的css样式代码进行处理，提高其在各个浏览器的兼容性，常用做法是为每个浏览器样式添加特有前缀
12、单行、多行溢出省略号
单行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
13、自适应布局方式
媒体查询@media：通过监听不同的窗口宽度，展示不同的效果 rem：监听不同窗口宽度，为根节点设置对应font-size，并进而使所有使用到rem的样式得到变化（rem的“r”就是“root”）
14、CSS工程化
CSS实现模块化 CSS预处理器 CSS的postCSS CSS代码压缩
15、CSS常见单位
px：固定像素，无自适应 em：根据父元素的font-size决定大小 rem：根据根元素的font-size决定大小
16、flex：1代表什么？
flex: 1 1 auto
分别是flex-grow、flex-shrink、flex-basis
17、两栏布局
两栏布局指的是，左边固定右边自适应
float浮动
.outer {
height: 100px;
}
.left {
float: left;
width: 200px;
background: tomato;
}
.right {
margin-left: 200px;
width: auto;
background: gold;
}
flex布局
.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
flex: 1;
background: gold;
}
18、三栏布局
三栏布局指的是左右固定，中间自适应
直接用flex布局
.outer {
display: flex;
height: 100px;
}
.left {
width: 100px;
background: tomato;
}
.right {
width: 100px;
background: gold;
}
.center {
flex: 1;
background: lightgreen;
}
19、双飞翼（圣杯）布局
直接用flex布局
.outer {
display: flex;
height: 100px;
}
.left {
width: 100px;
background: tomato;
}
.right {
width: 100px;
background: gold;
}
.center {
flex: 1;
background: lightgreen;
}
20、水平垂直居中实现？
绝对定位+transform
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
flex布局
.parent {
display: flex;
justify-content:center;
align-items:center;
}
21、清除浮动方式
给父元素定义高度：不建议，会导致其他布局问题 末尾空div并设置clear：both不建议，增加无用dom节点 父元素设置overflow：hidden不建议，会导致部分内容被隐藏 使用伪元素after+clear:both强烈推荐
22、对于BFC的理解？
BFC(块级格式上下文)，你可以理解为一个有自己的布局规则的容器，其内部的布局不受外部影响
创建BFC的条件
根元素：body 元素设置浮动：float 元素设置绝对定位：position为absolute、fixed display为：inline-block、table-cell、table-caption、flex等 overflow为：hidden、auto、scroll
BFC容器特点
垂直方向上，自上而下排列 BFC中两个相邻容器的margin会重叠 计算BFC高度时，会把浮动元素也计算（清除浮动方式之一） BFC容器不会和浮动容器发生重叠 BFC容器内部元素不会影响外部元素 每个元素左margin与容器的左border相接触
23、实现一个三角形？
宽度设置0，四个border中，透明掉三个，剩一个显示，就是三角形了
div {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: red;
}
24、实现扇形
跟三角形差不多，只不过多设置一个border-radius
div{
border: 100px solid transparent;
width: 0;
heigt: 0;
border-radius: 100px;
border-top-color: red;
}
25、如何显示小于12px的文字？
使用transform: scale()进行缩小
span {
font-size: 12px;
-webkit-transform: scale(0.8);
display: block;
}
26、为什么css选择器是自右往左解析？
链接：https://blog.csdn.net/jinboker/article/details/52126021
结语
我是林三心，一个热心的前端菜鸟程序员。如果你上进，喜欢前端，想学习前端，那咱们可以交朋友，一起摸鱼哈哈，摸鱼群，关注我，拉你进群，有5000多名前端小伙伴在等着一起学习哦 -->
模拟面试、简历指导可私信找我，价格超级实惠~